<template>
    <div class="ui-input-tags" :class="{'disabled': disabled}" @click.stop="handleBlur">
        <Tag
        	v-for="(item, index) in value"
        	:name="index"
        	:closable="closable"
        	:color="typeof color == 'string' ? color : (color[index] || 'default')"
        	:key="index"
        	@on-close="handleClose"
        >
        	{{ item }}
        </Tag>
        <div class="ui-input-tags-edit" contentEditable="true" ref="editElem" @keydown.enter="handleEnter" @blur="handleEnter"></div>
    </div>
</template>

<script>
export default {
    name: 'inputTags',
    props: {
        value: {
            type: Array,
            default: function() {
                return [];
            }
        },
        disabled: {
        	type: Boolean,
        	default: false
        },
        color: {
            type: String | Array,
            default: 'default'
        },
        closable: {
            type: Boolean,
            default: true
        },
        // 最大tag数量
        maxLength: {
        	type: Number,
        	default: 10
        },
        // 是否过滤特殊字符
        filter: {
        	type: Boolean,
        	default: true
        },
        // 当个tag最大字符数
        maxStrLen: {
        	type: Number,
        	default: 20
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        handleBlur() {
        	if(this.disabled) return false;
        	if(this.value.length >= this.maxLength) return false;
            this.$refs.editElem.focus();
        },
        // 回车事件触发输入完成
        handleEnter(e) {
            e.preventDefault();
            // 获取输入框对象
            let editElem = this.$refs.editElem;
            
            // 最大tag数量
            if(this.value.length >= this.maxLength) {
            	editElem.innerText = '';
            	this.$Message.error('最多可输入 '+ this.maxLength +' 个标签');
            	return false;
            }
            
            // 获取输入的值
            let value = editElem.innerText;
            
            // 判断是否需要过滤特殊字符
            if(this.filter) {
            	let reg = /[`~!@#$^&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
            	value = value.replace(reg, "");
            	editElem.innerText = value;
            }
            
            // 过滤后为空的
            if(!value) {
            	return false;
            }
            
            // 判断字符数是否超出最大字数限制
            if(value.length > this.maxStrLen) {
            	this.$Message.error('输入的内容过长，请勿超过 '+ this.maxStrLen +' 个字符');
            	return false;
            }
            
            let tags = this.value;
            
            // 清空内容
            editElem.innerText = '';
            // 判断是否重复输入
            if(tags.indexOf(value) >= 0) {
            	return false;
            }
            // 添加
            tags.push(value);
            // 回调
            this.$emit('input', tags);
            this.$emit('change', tags);
        },
        handleClose(event, name) {
        	let tags = this.value;
        	// 删除对应标签
        	tags.splice(name, 1);
        	// 回调
        	this.$emit('input', tags);
            this.$emit('change', tags);
        }
    }
}
</script>

<style lang="less">
.ui-input-tags {
    display: inline-block;
    width: 100%;
    padding: 2px 5px;
    font-size: 12px;
    border: 1px solid #dddee1;
    border-radius: 4px;
    color: #495060;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
    overflow: hidden;
    div {
        float: left;
        vertical-align: top;
    }
    &-edit {
        margin: 2px 0;
        padding-right: 5px;
        min-width: 20px;
        line-height: 22px;
        outline: none;
    }
    &.disabled {
    	background-color: #fafafa;
    	cursor: not-allowed;
    }
}
</style>